<template>
		<NavBar title="包裹" />
	<view class="contain" :style="`height: ${screenHeight}px;`">
		<view class="bg-white flex h-[40px]">
			<view
				class="p-1 list-item text-center"
				v-for="(item, index) in list"
				:key="item.value"
				@click="current = item.value"
				:class="{ 'active': item.value === current }"
			>
				{{ item.label }}
			</view>
		</view>
		<view :style="`height: ${current === 1 ? screenHeight - 80 : screenHeight - 40}px;`" class="overflow-y-auto">
			<uv-checkbox-group v-model="selectionArr">
				<uni-card
					v-for="(item, index) in showList"
					:key="index"
					title="基础卡片" 
					sub-title="副标题"
					extra="额外信息" 
					padding="10px 0"
				 >
					<template v-slot:title>
						<uni-list>
							<view class="flex justify-between px-2 py-3">
								<label>单号: {{ item.courierNumber }}</label>
								<view v-if="current === 1" class="flex items-center">
									<uv-checkbox :key="item.id" :label="item.warehouseName || ''" :name="item.id || ''" />
								</view>
							</view>
						</uni-list>
					</template>
					
					<view class="grid grid-cols-2 gap-3">
						<text class="uni-body uni-mt-5">货物品名: {{ item.cargoName || '--' }}</text>
						<text class="uni-body uni-mt-5">体积重量: {{ item.volumeWeight || '--' }} (kg)</text>
						<text class="uni-body uni-mt-5">计费体积: {{ item.cargoDimensions || '--' }} (cm)</text>
						<text class="uni-body uni-mt-5">实际重量: {{ item.actualWeight || '--' }} (kg)</text>
						<view class="uni-body uni-mt-5 flex justify-between">
							<text>货物价值: {{ item.cargoValue || '--' }}</text>
							<text>货物数量: {{ item.cargoQuantity || '--' }}</text>
						</view>
						<text class="uni-body uni-mt-5">货物类型: {{ item.cargoType || '--' }}</text>
						<text class="uni-body uni-mt-5">到库时间: {{ item.arrivalTime || '--' }}</text>
						<text class="uni-body uni-mt-5">上架时间: {{ item.shelfTime || '--' }}</text>
					</view>
					<view slot="actions" class="flex flex-row-reverse items-center pt-3 pb-2">
						<view class="card-actions-item" @click="openPackageModel(item)">
							<uni-icons type="trash" size="18" color="red"></uni-icons>
							<text class="card-actions-item-text">删除</text>
						</view>
						<view class="card-actions-item" @click="editPackage(item)">
							<uni-icons type="compose" size="18" color="red"></uni-icons>
							<text class="card-actions-item-text">编辑</text>
						</view>
						<view class="card-actions-item" @click="openImg(item.image)">
							<uni-icons type="images" size="18" color="red"></uni-icons>
							<text class="card-actions-item-text">图片</text>
						</view>
					</view>
				</uni-card>
			</uv-checkbox-group>
			<view v-show="current === 1" class="absolute right-0 bottom-10 flex items-center bg-white rounded-l-lg p-2 cursor-pointer" @click="join">
				<uni-icons type="plusempty" color="white" size="15" class="w-[20px] h-[20px] rounded-full bg-red-400 mr-2" />
				<text class="text-xs">新增包裹</text>
			</view>
			<uv-empty v-show="showList.length <= 0" icon="https://cdn.uviewui.com/uview/empty/data.png" class="h-full" />
		</view>
		<view v-show="current === 1" class="h-[40px] bg-white flex px-3 py-2 justify-between">
			<view class="text-sm">
				总计费重(<label class="text-red">{{ allWeight }}</label>)kg
				数量(<label class="text-red">{{ allQuantity }}</label>)
			</view>
			<view class="flex items-center">
				<label class="mr-2">全选</label>
				<checkbox :checked="isAll" @tap="allpick" />
			</view>
			<view>
				<uv-button type="primary" size="mini" text="申请集运" @tap="applyOrder" />
			</view>
		</view>
		<uv-overlay :show="imgShow" @click="imgShow = false">
			<view class="h-full flex justify-center items-center">
				<image :src="imgUrl" />
			</view>
		</uv-overlay>
	</view>
</template>

<script setup>
	import { getPackageList, getPackageAllList, delPack } from '@/api/modules/package.js'
	import store from '@/store'
	const { user } = store()
	
	const list = ref([
		{
			label: '全部',
			value: 2
		},
		{
			label: '已入库',
			value: 1
		},
		{
			label: '未入库',
			value: 0
		}
	])  // 顶部选项卡效果
	const showList = ref([]) // 展示数据
	const current = ref(2) // 全部/已入库/未入库
	const selectionArr = ref([]) // 多选集合
	const isAll = ref(false) // 是否全选
	const imgShow = ref(false) // 图片是否展示
	const imgUrl = ref('') // 图片路径
	
	// 全屏高度
	const screenHeight = computed(() => {
		return uni.getSystemInfoSync().windowHeight
	})
	// 总计费重
	const allWeight = computed(() => {
		const sum = 0
		if(current.value === 1) {
			selectionArr.value.forEach(item => {
				// console.log(sum)
			})
		}
		return sum
	})
	// 总数量 cargoQuantity
	const allQuantity = computed(() => {
		const sum = 0
		if(current.value === 1) {
			selectionArr.value.forEach(item => {
				// console.log(sum)
			})
		}
		return sum
	})
	
	// 获取数据
	const getList = async () => {
		let res = { data: [] }
		const config = {
			flag: current.value,
			userId: user.userInfo.userId
		}
		// 查询全部不需要传入flag
		if(current.value === 2) {
			delete config.flag
			res = await getPackageAllList(config)
		} else {
			res = await getPackageList(config)
		}
		res.data.forEach(item => {
			item.checked = false
		})
		showList.value = res.data
	}
	// 全选/反选
	const allpick = () => {
		console.log(showList.value)
		isAll.value = !isAll.value
		let arr = []
		if(isAll.value) {
			arr = showList.value.map(item => {
				return item.id
			})
		}
		console.log(arr)
		selectionArr.value = arr
		// console.log(selectionArr.value)
	}
	// 打开是否删除
	const openPackageModel = (data) => {
		uni.showModal({
			title: '提示',
			content: `是否删除？`,
			success: function(res) {
				if (res.confirm) {
					setTimeout(async () => {
						await delPack(data.id) // 删除单个包裹
						getList() // 重新获取数据
						this.$refs.modal.close();
					}, 2000)
				} else if (res.cancel) {
					console.log('用户点击取消')
				}
			}
		})
	}
	// 跳转到申请集运
	const applyOrder = () => {
		if(selectionArr.value.length > 0) {
			const data = selectionArr.value.map(item => {
				return showList.value.find(value => { return value.id === item })
			})
			const cargoType = data[0].cargoType
			const check = data.every(item => { return item.cargoType === cargoType })
			// 判断是否是同一货物类型
			if(check) {
				uni.navigateTo({
					url: `/pages/applyTransform/applyTransform`,
					success: function(res) {
					    // 通过eventChannel向被打开页面传送数据
					    res.eventChannel.emit('applyOrder', data)
					  }
				})
			} else {
				uni.showToast({ title: '请同一货物类型的包裹', icon: 'none' })
			}
		} else {
			uni.showToast({ title: '请选择包裹', icon: 'none' })
		}
	}
	// 跳转到预报包裹
	const join = () => {
		uni.navigateTo({
			url: '/pages/prediction/prediction'
		})
	}
	// 打开图片
	const openImg = (image) => {
		if(image === null) {
			imgUrl.value = ''
			uni.showToast({ title: '暂无图片' })
		} else {
			imgUrl.value = image
			imgShow.value = true
		}
	}
	// 编辑包裹
	const editPackage = (pack) => {
		uni.navigateTo({
			url: '/pages/prediction/prediction',
			success: function(res) {
				res.eventChannel.emit('recivePack', { type: 1, data: pack }) // 通过eventChannel向被打开页面传送数据
			}
		})
	}
	
	watch(() => current, () => {
		getList()
	}, { deep: true, immediate: true })
	
	watch(selectionArr, (newValue) => {
		console.log(newValue)
		isAll.value = newValue.length === showList.value.length && newValue.length !== 0
	})
	
</script>

<style lang="scss">
.contain {
	background: #f2f2f2;
	border-top: 1px solid #ccc;

	.list-item {
		height: 40px;
		line-height: 30px;
		flex: 1;
		list-style: none;
		position: relative;
		cursor: pointer;

		&::after {
			content: '';
			position: absolute;
			bottom: 0px;
			left: 50%;
			transform: translateX(-50%);
			width: 0;
			height: 2px;
			background-color: #d96100;
			transition: width 0.3s ease; /* 添加过渡效果 */
		}
	}

	.active::after {
		width: 100%; /* 点击时触发宽度变化 */
	}
}
.card-actions-item {
	margin-right: 15px;
	display: flex;
	align-items: flex-start;
}

.card-actions-item:first-child {
	margin-right: 5px;
}
</style>
